<template>
  <div>
    <transition name="animation">
      <el-card class="box-card" v-show="flag">
        <div slot="header" class="clearfix">
          <h3>组织管理</h3>
        </div>
        <template>
          <download-excel
            :data="tableData"
            :fields="json_fields"
            :header="title"
            name="导-excel表格"
          >
            <el-button type="primary">导出</el-button>
          </download-excel>
        </template>
        <template>
          <el-table
            :data="tableData"
            stripe
            :header-cell-style="{
              background: '#f5f7f9',
              borderTop: '1px solid #ebeef5',
              textAlign: 'center',
            }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="name" label="组织名称"> </el-table-column>
            <el-table-column prop="type" label="组织类型"> </el-table-column>
            <el-table-column prop="num" label="员工数">
              <template slot-scope="scope">
                {{scope.row.staffList.length}}
              </template>
            </el-table-column>
            <el-table-column prop="principal" label="负责人"></el-table-column>
            <el-table-column prop="leader" label="分管领导"></el-table-column>
          </el-table>
        </template>
      </el-card>
    </transition>
  </div>
</template>

<script>
export default {
  name: "VueSalarysysOrgan",

  data() {
    return {
      tableData: [],
      flag: false,
      title: "组织表",
      json_fields: {
        组织名称: "name",
        组织类型: "type",
        员工数: "num",
        负责人: "principal",
        分管领导: "leader",
      },
    };
  },

  mounted() {
    setTimeout(() => {
      (this.flag = true), this.getData();
    }, 100);
  },

  methods: {
    async getData() {
      let { data } = await this.$axios.get("/organ/getSta");
      this.tableData = data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 30px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

// 动画
.animation-enter,
animation-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

.animation-enter-active {
  transition: all 0.5s ease-in-out;
}

.animation-enter-to,
animation-leave {
  transform: translateX(0);
  opacity: 1;
}
</style>